<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/index.css">
<style>
  .show{
    display: block;
    width: 100%;
    height: 100%;
  }
  .s1{
    margin-right: 10px;
  }
</style>
</head>
<body>
<div id="app">
<el-card class="box-card">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="订单号">
              <el-input v-model="search.oid" placeholder="订单号"></el-input>
            </el-form-item>
            <el-form-item label="买家">
                <el-input v-model="search.uname" placeholder="买家"></el-input>
              </el-form-item>
              <el-form-item label="商品名称">
                <el-input v-model="search.pname" placeholder="商品名称"></el-input>
              </el-form-item>
              
              <el-form-item label="订单状态">
              <el-select v-model="search.status" placeholder="全部状态">
                <el-option label="所有" value="-1"></el-option>
                <el-option label="待发货" value="1"></el-option>
                <el-option label="待评价" value="4"></el-option>
                <el-option label="可退货" value="5"></el-option>
                <el-option label="退货审核中" value="6"></el-option>
                <el-option label="已退货" value="7"></el-option>
              </el-select>
            </el-form-item>
              
              <el-form-item>
              <div class="block">
               <span>时间间</span>
			    <el-date-picker
			    	@change="gettime"
			      v-model="search.value1"
			      value-format="yyyy-MM-dd hh:mm:ss"
			      type="daterange"
			      range-separator="至"
			      start-placeholder="开始日期"
			      end-placeholder="结束日期">
			    </el-date-picker>
			  </div>
              </el-form-item>
            
<!--             <el-form-item label="付款方式"> -->
<!--               <el-select v-model="user.status" placeholder="付款方式"> -->
<!--                 <el-option label="微信" value="0"></el-option> -->
<!--                 <el-option label="支付宝" value="1"></el-option> -->
<!--                 <el-option label="余额" value="1"></el-option> -->
<!--               </el-select> -->
<!--             </el-form-item> -->
    
            <el-form-item>
              <el-button type="primary" @click="byselectL(1)">查询</el-button>
            </el-form-item>
          </el-form>

        <!--表格显示-->
          <el-table
          :data="orderInfo"
          border
          style="width: 100%; margin-top: 40px; min-height: 290px">
          <el-table-column
          label="订单号"
          align="center"
          width="80px"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.oid }}</span>
          </template>
          </el-table-column>
          
          <el-table-column
          align="center"
		     label="姓名"
		     width="70">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="left">
          <p>姓名: {{ scope.row.aname }}</p>
          <p>电话: {{ scope.row.atel }}</p>
          <p>地址: {{ scope.row.province }}省 {{ scope.row.city }}市 {{ scope.row.area }}区 {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.uname }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
          
          <el-table-column
          label="购买时间"
          align="center" width="160px"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.time }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="总金额"
          align="center"
          >
          <template slot-scope="scope">
          <span v-if="scope.row.discount == ''">{{ scope.row.countmoneys }}</span>
          <span v-if="scope.row.discount != ''">{{ (scope.row.countmoneys / scope.row.discount).toFixed(2) }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="实收金额"
          align="center"
          >
          <template slot-scope="scope">
          	<span>{{ scope.row.countmoneys}}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="订单商品数量"
          align="center"
          >
          <template slot-scope="scope">
            <el-popover
		    placement="left"
		    title="商品展示"
		    width="200"
		    trigger="hover"
		    @show="ordershowproductL(scope.row.oid)"
		    >
		    <table class="tips-content">
		    	<tr><th class="s1" align="center">商品名称</th><th align="center">商品数量</th><th align="center">商品单价</th></tr>
		    	<tr v-for="item in product"><td class="s1" align="center">{{item.pname}}</td><td align="center">{{item.num}}</td><td align="center">{{item.outprice}}</td></tr>
		    </table>
            <span slot="reference"><span class="show">{{scope.row.num}}</span></span>
          </el-popover>
          </template>
          </el-table-column>
          <el-table-column
          label="交易状态"
          align="center"
          >
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">待支付</span>
            <span v-if="scope.row.status == 1">待发货</span>
            <span v-if="scope.row.status == 2">运输中</span>
            <span v-if="scope.row.status == 3">已完成</span>
            <span v-if="scope.row.status == 4">待评价</span>
            <span v-if="scope.row.status == 5">可退货</span>
            <span v-if="scope.row.status == 6">退货审核中</span>
            <span v-if="scope.row.status == 7">已退货</span>
          </template>
          </el-table-column>
          <el-table-column
          label="优惠卷"
          align="center"
          width="120px"
          >
          <template slot-scope="scope">
          	<span v-if="scope.row.discount == ''"></span>
            <span v-if="scope.row.discount != ''">{{ scope.row.discount * 10 }}折</span>
          </template>
          </el-table-column>
          
          <el-table-column
          label="发货时间"
          align="center"
          width="160px" align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.time1 == null ? "未发货" : scope.row.time1}}</span>
          </template>
          </el-table-column>
          
          <el-table-column
          label="收货时间"
          align="center"
          width="160px" align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.time2 == null ? "未收货" : scope.row.time1 }}</span>
          </template>
          </el-table-column>
          
          <!-- 
          <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == 1"
            size="mini"
            @click="remove(scope.$index, scope.row)">发货</el-button>
            <el-button v-if="scope.row.status == 5"
            size="mini"
            @click="refund(scope.$index, scope.row)">退款</el-button>
          </template>
          </el-table-column>
           -->
           
        </el-table>
        <div class="block">
  		<el-pagination
    	layout="prev, pager, next"
    	:total="total"
    	:page-size="10"
    	:current-page="pagenum"
    	@current-change="pageL">
  		</el-pagination>
		</div>
    </el-card>
</div>
<script src="../../js/vue.js"></script>
<script src="../js/index.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>
<script>
let app = new Vue({
	el: '#app',
	data: {
		orderInfo: [],
		searchone:[],
		search:{
			oid:'',
			uname:'',
			pname:'',
			status:'',
			value1: '',
			start:"",
		    end: "",
		},
		pagenum: 1,
		total:0,
		product:[]
	},
	methods: {
		//获取前8个数据
		getnumorderL(){
			this.pageL(1);
		},
		//换页
		pageL(currentPage){
			console.log(this.search.value1);
			this.pagenum = currentPage;
			axios.post("../../orderController/pageL", qs.stringify({
				pagenum:this.pagenum,
				start:this.searchone.start,
				end:this.searchone.end,
				oid:this.searchone.oid,
				uname:this.searchone.uname,
				pname:this.searchone.pname,
				status:this.searchone.status
			})).then(resp=>{
				this.orderInfo = resp.data;
				if(resp.data.length > 0){
					this.total = Number(this.orderInfo[0].count);
				}else{
					this.total = 0;
				}
				console.log(this.orderInfo);
			});
		},
		//查询
		byselectL(){
			//存数据，防止修改搜索框内容，进行分页
			this.searchone = this.search;
			this.pageL(1);
		},
		//查询订单信息
		ordershowproductL(oid){
			axios.post("../../orderController/ordershowproductL", qs.stringify({
				oid:oid
			})).then(resp=>{
				this.product = resp.data;
			});
		},
		gettime(value1) {
		      //定义开始结束时间
		      if (value1 != null) {
		    	  this.search.start = value1[0];
		    	  this.search.end = value1[1];
		      }else{
		    	  this.search.start ='';
		    	  this.search.end ='';
		      }
		    },
	},
	created(){
		this.getnumorderL();
	},
	computed: {
		
	}
});
</script>
</body>
</html>